<template>

	<!-- title部分 -->
	<view class="title">
		<view class="title-iconbox">
			<image class="title-backicon" src="../../static/上一步.png" @click="gotoIndex"></image>
		</view>
		<view class="title-iconbox">
			<image class="title-backicon" src="../../static/邀请好友.png"></image>
		</view>
	</view>
	<view class="background"></view>
	<!-- 商品详情部分 -->
	<view class="product">
		<view class="productbox">
			<view class="productbox-rroductintroduction">
				<image class="productbox-rroductintroduction-img" src="../../static/淘宝小图标.png"></image>
				<view class="productbox-rroductintroduction-img-text">【新年礼物】 CHANEL 香奈尔嘉柏丽尔香水</view>
			</view>
			<view class="pricebox">
				<view class="product-shoppricebox1">
					<text class="product-pricebox-text1">￥98.00</text>
					<text class="product-pricebox-text2">￥98.00</text>
					<view class="product-pricebox-text3">10万人已购买</view>
				</view>

				<view class="product-shoppricebox2">
					<view class="product-shoppricebox-text1">购买返￥0.02</view>
					<view class="product-shoppricebox-text2"></view>
					<view class="product-shoppricebox-text1">平台补贴￥0.02</view>
				</view>
			</view>
			<!-- 优惠券部分 -->
			<view class="coupon">
				<view class="couponbox-img">
					<view class="couponbox-text">10元</view>
					<view class="couponbox-tipbox">
						<view class="couponbox-tiptext">商家专享优惠券</view>
						<view class="couponbox-tiptext2">12天 00:00:19后过期</view>
					</view>
				</view>
				<view class="couponbox-receivebox">
					<view class="couponbox-receivebox-receive">领取</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 商品详情 -->

	<view class="shoptextbox">
		<view class="shoptext">商品详情</view>

		<image class="shopimg" src="../../static/下一步1.png"></image>
	</view>

	<view class="centerthirdbox">
		<view class="centerthirdbox_tabbox">
			<view class="centerthirdbox_tabbox_text" v-for="(tab, index) in tabs" :key="index"
				:class="{ 'active': subCurrent === index }" @click="subChecked(index)">
				{{ tab }}
			</view>
		</view>
	</view>

	<!-- 商品部分 -->
	<view class="shop">
		<view class="shopbox" v-if="subCurrent === 0">

			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">1880积分</view>
			</view>

			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">1880积分</view>
			</view>

			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">1880积分</view>
			</view>

			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">1880积分</view>
			</view>
		</view>


		<view class="shopbox" v-if="subCurrent === 1">
			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">1880积分</view>
			</view>
		</view>

		<view class="shopbox" v-if="subCurrent === 2">
			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">1880积分</view>
			</view>
		</view>
	</view>

	<!-- 底部tabbar -->
	<view class="buttombar">
		<view class="buttombarbox">
			<view class="iconbox">
				<view class="iconindexbox">
					<image class="indeximg" src="../../static/首页.png"></image>
					<view class="indextext">首页</view>
				</view>
				<view class="iconindexbox">
					<image class="likeimg" src="../../static/喜欢.png"></image>
					<view class="liketext">收藏</view>
				</view>
			</view>
			<view class="buttombar-sharetext">分享赚￥4.00元</view>
			<view class="buttombar-purchase">购买反￥4.00元</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['猜你喜欢', '京东', '淘宝'],
				subCurrent: 0, // 默认选中第一个子tab
			}
		},
		methods: {
			subChecked(index) {
				this.subCurrent = index;
			},
			gotoIndex() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/index/index', // 我的路径
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}

	/* title部分 */
	.title {
		text-align: center;
		display: flex;
		padding: 2%;
		justify-content: space-between;
		background: rgb(102, 170, 253);
	}

	.title-iconbox {
		padding: 2%;
		border-radius: 50%;
		background: #eee;
	}

	.title-backicon {
		width: 20px;
		height: 20px;
		display: block;
	}

	/* 轮播图部分 */
	.background {
		padding: 2%;
		height: 150px;
		background: rgb(102, 170, 253);
	}

	/* 产品部分 */
	.product {
		padding: 2%;
		margin-bottom: 10px;
	}

	.productbox {
		background: white;
		padding: 2%;
		border-radius: 10px;
		border-bottom: 10px;
	}

	.productbox-rroductintroduction {
		padding: 2%;
		display: flex;
		align-items: center;
	}

	.productbox-rroductintroduction-img {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}

	.productbox-rroductintroduction-img-text {
		font-size: 15px;

	}

	.pricebox {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.product-shoppricebox1 {
		padding: 2%;
	}

	.product-pricebox-text1 {
		font-size: 15px;
		color: red;
		margin-right: 5px;
	}

	.product-pricebox-text2 {
		font-size: 13px;
		color: rgb(120, 120, 120);
	}

	.product-pricebox-text3 {
		font-size: 15px;
		color: #bbb3b3;
	}

	.product-shoppricebox2 {
		padding: 1%;
		display: flex;
		align-items: center;
		color: white;
		background: linear-gradient(190deg, rgb(247, 97, 76), rgb(248, 195, 79));
		justify-content: space-around;
		border-radius: 50px;
	}

	.product-shoppricebox-text1 {
		width: 45%;
		font-size: 12px;
		text-align: center;
	}

	.product-shoppricebox-text2 {
		background: white;
		width: 1px;
		height: 20px;
	}

	.coupon {
		display: flex;
		align-items: center;
		height: 80px;
	}

	.couponbox-img {
		background-image: url('../../static/优惠券.png');
		background-repeat: no-repeat;
		background-size: cover;
		width: 77%;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.couponbox-text {
		font-size: 20px;
		color: red;
	}

	.couponbox-tipbox {
		font-size: 13px;
	}

	.couponbox-tiptext {}

	.couponbox-tiptext2 {}

	.couponbox-receivebox {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		background: rgb(250, 125, 80);
		border-radius: 0 10px 10px 0;
		height: 80px;
	}

	.couponbox-receivebox-receive {
		color: red;
		padding: 5% 20%;
		border-radius: 30px;
		background: linear-gradient(to bottom, white, rgb(250, 200, 200));
		font-size: 13px;
	}

	/* 商品详情部分 */
	.shoptextbox {
		padding: 2%;
		background: white;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 92%;
		margin: 0 auto;
		border-radius: 10px;
	}

	.shoptext {
		font-size: 13px;
	}

	.shopimg {
		width: 15px;
		height: 15px;
		display: block;
	}

	/* 中间第三部分 */
	.centerthirdbox {
		padding: 2%;
	}

	.centerthirdbox_tabbox {
		display: flex;
		align-items: center;
	}

	.centerthirdbox_tabbox_text {
		font-size: 12px;
		color: rgb(120, 120, 120);
		margin: 0 2%;
	}

	/* tab被选样式 */
	.active {
		position: relative;
		color: black;
		font-weight: bold;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 15px;
		height: 3px;
		background-color: black;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: 20px;
		border-radius: 5px;
	}

	/* 商品部分 */
	.shop {
		/* background: linear-gradient(to bottom, rgba(250, 90, 34, 1) 1%, rgba(250, 90, 34, 0) 17%); */
		padding: 2%;
		/* margin-bottom: 42px; */
		padding-bottom: 25%;
	}

	.shopbox {
		/* margin: 0 auto; */
		display: flex;
		flex-wrap: wrap;
		/* align-items: center; */
		gap: 2%;
	}

	.shopbox_shopcontent {
		width: 43%;
		background: white;
		padding: 3%;
		margin-bottom: 3%;
		border-radius: 10px;
	}

	.shopbox_shopcontent_img {
		width: 100%;
		height: 108px;
	}

	.shopbox_shopcontent_text {
		font-size: 15px;
		margin-bottom: 10px;
	}

	.shopbox_shopcontent_neirongbox {
		color: red;
		padding: 2%;
		font-size: 13px;
	}

	/* 底部tabbar样式 */
	.buttombar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		/* height: 48px; */
		background-color: #fff;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
		z-index: 999;
	}

	.iconbox {
		display: flex;
		align-items: center;
		width: 20%;
	}

	.buttombarbox {
		display: flex;
		width: 100%;
		justify-content: space-around;
		align-items: center;
	}

	.iconindexbox {
		width: 50%;
	}

	.indeximg {
		width: 20px;
		height: 20px;
		margin: 0 auto;
		display: block;
	}

	.indextext {
		font-size: 15px;
		text-align: center;
	}

	.likeimg {
		width: 20px;
		height: 20px;
		margin: 0 auto;
		display: block;
	}

	.liketext {
		font-size: 15px;
		text-align: center;
	}

	.buttombar-sharetext {
		color: #333;
		font-size: 14px;
		padding: 2%;
		border-radius: 30px;
		background: #f6f6f6;
	}

	.buttombar-purchase {
		color: #333;
		font-size: 14px;
		padding: 2%;
		background: rgb(241, 224, 84);
		border-radius: 30px;
	}
</style>
